<template>
	<div class="box">
		<div class="left">
			<div class="one">
				<div class="lyl">
					<div>利用率</div>
					<div>{{info.USE}}%</div>
				</div>
				<div class="wait">
					<div>
						CPU的IO等待
					</div>
					<div>{{info.CPU_IOWAIT}}</div>
				</div>
				<div class="sd" style="display:none">
					<div>速度</div>
					<div>3.20 GHZ</div>
				</div>
			</div>
			<div class="two" style="display:none">
				<div class="jc">
					<div>进程</div>
					<div>340</div>
				</div>
				<div class="xc">
					<div>线程</div>
					<div>4432</div>
				</div>
				<div class="jb">
					<div>句柄</div>
					<div>185247</div>
				</div>
			</div>
			<div class="three" style="display:none">
				<div class="zcyxsj">
					<div>正常运行时间</div>
					<div>24:22:14:15</div>
				</div>
			</div>
		</div>
		<div class="right" style="display:none">
			<table>
				<tr>
					<th>基准速度</th>
					<th>2.5 GHZ</th>
				</tr>
				<tr>
					<th>插槽</th>
					<th>1</th>
				</tr>
				<tr>
					<th>内核</th>
					<th>4</th>
				</tr>
				<tr>
					<th>逻辑处理器</th>
					<th>4</th>
				</tr>
				<tr>
					<th>虚拟化</th>
					<th>已启用</th>
				</tr>
				<tr>
					<th>L1 缓存</th>
					<th>256KB</th>
				</tr>
				<tr>
					<th>L2 缓存</th>
					<th>1.0MB</th>
				</tr>
				<tr>
					<th>L3 缓存</th>
					<th>6.0MB</th>
				</tr>
			</table>
		</div>
	</div>
</template>

<script>
	import bus from "common/bus.js";
	export default {
		// props:['data'],
		data() {
			return {
				info: ''
			}
		},
		created() {

		},
		mounted() {
			bus.$on('ITEMMONITORCPULINE', (msg) => {
				this.info = msg
			})
		},
		beforeDestroy() {
			this.info = ''
			bus.$off('ITEMMONITORCPULINE')
		}
	}
</script>

<style lang="scss" scope>
	.box {
		display: flex;
		flex-direction: row;

		.left {
			display: flex;
			flex-direction: column;
			font-weight: 600;

			.one,
			.two,
			.three {
				display: flex;
				flex-direction: row;
			}

			.one>div,
			.two>div,
			.three>div {
				margin: 5px;
			}
		}
	}
</style>